<template>
	<view v-if="details && details.name" class="box" :style="theme">
		<view class="detailsTop flex" :class="details.state==1 || details.state==3?'on':''">
			<image :src="details.projectPic" class="left"></image>
			<view class="right flex-1">
				<view class="f36 cf fwb">{{details.name}}</view>
				<view class="mt10 f28 ce">运动项目：{{details.categroyName }}</view>
			</view>
		</view>
		<view class="card">
			<view class="f34 c2 fwb">约球拼场信息</view>
			<view class="mt24 flex-zuo">
				<view class="c6 f28">活动费用：</view>
				<view v-if="details.price>0" class="f28 redColor fwb">¥{{details.price }}</view>
				<view v-else class="f28 green">免费</view>
			</view>
			<view class="mt20 flex-zuo apply">
				<view class="c6 f28">报名人员：</view>
				<view class="c2 f28 flex-cl" style="width: 78%;">
					<view class="c2 f28 flex-left">
						<block v-if="details.numType == 1">
							限
							<text class="redColor">{{details.numMin}}</text>~<text
								class="redColor">{{details.numMax}}</text>
							人
						</block>
						<block v-else>不限人数</block>
						<text class="longString"></text>
						已报名
						<text class="redColor">{{details.joinNum}}</text>
						人
					</view>
					<view class="peopleList">
						<view class="flex-center mt30 mr47" v-for="(items, index) in details.users" :key="index">
							<image :src="items.pic || imgHost+'/user.png'" class="headPortrait"></image>
							<view class="f24 c3 mt16">{{items.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mt20 flex-zuo">
				<view class="c6 f28">约球时间：</view>
				<view class="c2 f28">{{details.acTime}}</view>
			</view>
			<view class="mt20 flex-zuo">
				<view class="c6 f28">报名截止：</view>
				<view class="c2 f28">{{details.endTime}}</view>
			</view>
			<view class="mt20 flex-zuo">
				<view class="c6 f28">活动说明：</view>
				<view class="c2 f28">{{details.description || ''}}</view>
			</view>
		</view>


		<view v-if="details.state==1" style="height: 250rpx;"></view>
		<!-- 报名中 -->
		<view v-if="details.state==1" class="bottomState flex flex_between">
			<view class="flex flexs flex_center" @click="jump('/pages/index/index','', 1)">
				<image
					:src="renovationInfo.navigationList && renovationInfo.navigationList.length > 0?renovationInfo.navigationList[0].iconSelected:imgHost+'/nav_home_sel.png'">
				</image>
				<view class="f20 c3 mt10 line1">首页</view>
			</view>
			<view class="flex">
				<!-- #ifdef MP -->
				<button class='share' open-type="share">分享好友</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button class='share' open-type="share" @click="shareBtn">分享好友</button>
				<!-- #endif -->
				<view class="registerNow" @click="enrollMeet">立即报名</view>
			</view>
		</view>
		<u-popup :show="showPops" round custom-style="background: none" mode="top" overlayOpacity="0.7">
			<view class="fxpop popcnt flex-cc">
				<image :src="imgHost+'/ic_tip.png'" class="img1"></image>
				<image :src="imgHost+'/btn_tip.png'" class="img2" @click="showPops = false"></image>
			</view>
		</u-popup>
	</view>
</template>
<script>
	// #ifdef H5
	import wx from '@/common/jweixin.js';
	// #endif
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				showPops: false,
				show: false,
				type: 1,
				details: {}
			}
		},
		computed: mapState(["renovationInfo"]),
		onLoad(ops) {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			this.id = ops.id
			if(ops.venueId) {
				this.$store.commit('setVenueId', ops.venueId);
			}
		},
		onShow() {
		   setTimeout(()=> {
			   this.getDetail()
		   }, 300)	
		},
		onShareAppMessage(e) {
			if (e.from == 'button') {
				// this.activityShare()
				return {
					path: `/pages/aboutBall/detail?id=${this.id}&venueId=${this.venueId}`,
				}
			} else {
				return {
					path: `/pages/aboutBall/detail?id=${this.id}&venueId=${this.venueId}`,
				}
			}
			
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			// 发起获取signature请求
			getSignature() {
				var url = location.href.split('#')[0];
				this.$app.ajax({
					data: {
						param: {
							path: url
						}
					},
					api: this.$api.wxpConfig()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.setShare(res.record)
					}
				}).catch(() => {})
			},
			// 设置分享数据
			setShare(signature) {
				let that = this
				var url = location.href.split('?')[0]
				uni.setStorageSync('signature', JSON.stringify(signature))

				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					// 配置微信 JSSDK
					appId: signature.appId, // 必填，公众号的唯一标识
					timestamp: signature.timestamp, // 必填，生成签名的时间戳
					nonceStr: signature.nonceStr, // 必填，生成签名的随机串
					signature: signature.signature, // 必填，签名
					jsApiList: ['scanQRCode', 'checkJsApi', 'chooseImage', 'updateAppMessageShareData',
						'updateTimelineShareData'
					]
				})

				wx.ready(function() {
					console.log('这是分享功能')
					wx.updateAppMessageShareData({
						imgUrl: that.details.projectPic, // 分享图标
						title: that.details.name, // 分享标题
						desc: that.details.description, // 分享描述
						link: url + "?id="+ that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						success: function() {
							console.log('我来分享了')
						}
					})
					wx.updateTimelineShareData({
						imgUrl: that.details.projectPic, // 分享图标
						title: that.details.name, // 分享标题
						desc: that.details.description, // 分享描述
						link: url + "?id="+ that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						success: function() {
							console.log('我来分享了')
						}
					})
				})
				wx.error((res) => {
					console.log(res)
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					// that.getSignature()
				})
			},
			//分享
			shareBtn(e) {
				if(e!=1) {
					this.showPops = true
				}
				const _signature = uni.getStorageSync('signature')
				// 先看看缓存里有没有
				if (_signature) {
					let signature = JSON.parse(_signature)
					// 获取当前时间戳
					var now = parseInt(new Date().getTime() / 1000) + ''
					// 计算两个时间戳之间的差值，单位为秒
					var diff = now - signature.expire_time

					// 判断差值是否大于2小时的秒数，即7200秒
					if (diff > 7200) {
						console.log('时间戳已经超过两小时。')
						this.getSignature()
					} else {
						console.log('时间戳未超过两小时。')
						this.setShare(signature)
					}
				} else {
					this.getSignature()
				}
			},
			navigation() {
				let data = this.details.latitudeLongitude.split(',')
				uni.openLocation({
					longitude: Number(data[0]),
					latitude: Number(data[1]),
					name: this.details.venueName,
					address: this.details.addr,
					success() {
						console.log('success');
					}
				})
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			jump4(item) {
				this.$store.commit('setVenueName', item.venueName);
				this.$store.commit('setVenueId', item.venueId);
				this.jump2('/pages/venue/detail?id=' + item.venueId)
			},

			enrollMeet() {
				let that = this
				this.$app.ajax({
					api: this.$api.enrollJointSite(),
					data: {
						param: {
							userType: '0',
							id: this.id,
							channelType: '01',
							memberId: this.userInfo.id,
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let orderId = res.record.orderId
						uni.showToast({
							title: '报名成功',
							icon: 'success',
							duration: 2000,
							success(res) {
								that.jump3('/pages/order/pay?type=17&orderId=', orderId)
							}
						})
					}
				}).catch(() => {})
			},

			getDetail() {
				this.$app.ajax({
					api: this.$api.appJointSiteDetial(),
					data: {
						userId: this.userInfo.id,
						param: {
							id: this.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.details = res.record
						// this.shareBtn(1)
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
	.detailsTop {
		padding: 30rpx;
		position: relative;
		background: #999999;

		// padding-right: 140rpx;
		&.on {
			background: $color2;
		}

		.left {
			width: 104rpx;
			height: 104rpx;
			margin-right: 24rpx;
		}


		.rightTip {
			position: absolute;
			width: 118rpx;
			text-align: center;
			line-height: 56rpx;
			background: #FFFFFF;
			border-radius: 28rpx 0rpx 0rpx 28rpx;
			right: 0;
			top: 50%;
			margin-top: -28rpx;
			font-size: 26rpx;
			color: #999;

			&.on {
				color: $color2;
			}
		}
	}

	.card {
		background: #fff;
		box-sizing: border-box;
		padding: 30rpx;

		.rightJump {
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}

		.flex-zuo {
			.c6 {
				flex: none;
			}
		}

		.longString {
			width: 4rpx;
			height: 24rpx;
			background-color: #999;
			margin: 0 10rpx;
		}

		.address {
			vertical-align: middle;
			width: 30rpx;
			height: 30rpx;
			margin-left: 10rpx;
		}
	}


	.headPortrait {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.apply {
		align-items: flex-start;
	}

	.peopleList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.bottomState {
		width: 100%;
		padding: 20rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		box-sizing: border-box;
		overflow: hidden;

		.flexs {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.share {
			height: 80rpx;
			width: 200rpx;
			text-align: center;
			color: $color;
			border: 1px solid $color;
			background-color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			line-height: 80rpx;
		}

		.registerNow {
			height: 80rpx;
			width: 200rpx;
			text-align: center;
			color: #fff;
			background-color: $color;
			font-size: 28rpx;
			border-radius: 40rpx;
			line-height: 80rpx;
			margin-left: 20rpx;
		}
	}
</style>